<template>
  <div class="upload-container">
    <!-- 公司资质认证->证书状态： -1 已退回 0 待审核 1 已通过 2 未上传 3：弹窗选择一个账号进入 4：新用户弹注册表单-->
    <el-dialog title="资质认证" :visible.sync="open" width="760px" :close-on-click-modal="false" :before-close="goBackWorkbench">
      <!-- 未上传资质认证 -->
      <div v-if="state == 2" class="certification-group">
        <p class="group-tip2">贵司未完成资质认证，请提交资质，方能申请开通付费会员或免费试用</p>
        <p class="group-tip">请完善营业执照及相关信息，工作人员会在1个工作日内审核。<br>
         审楼通过后，会有专员与您对接确认开通付费会员或免费试用</p>
        <div class="group-upload">
          <div v-if="picName" class="upload-img">
            <img :src="`https://img1.17img.cn/17img/${picName}`" alt="">
            <i class="el-icon-error" @click="delectImg" />
          </div>
          <div class="upload-box">
            <el-upload
              ref="uploadPic"
              action="/api/b2b/common-api/file/upload/imageNoMark"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <el-button>{{ picName ? '重新上传执照' : '上传执照' }}</el-button>
            </el-upload>
            <p class="box-tip">营业执照副本/外商登记证（非必填）</p>
          </div>
        </div>
      </div>
      <div v-if="!isHaveInfo" v-loading="loading" class="p16" />
      <div v-if="isHaveInfo" class="upload-info">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="75px" class="info-ruleForm">
          <div class="flex">
            <el-form-item label="企业名称" prop="title">
              <el-input v-model="ruleForm.title"  type="text" class="w270" placeholder="请输入企业名称" />
            </el-form-item>
            <el-form-item label="企业类型" prop="newregisteredtype">
              <el-input v-model="ruleForm.newregisteredtype"  type="text" class="w270" placeholder="请输入企业类型" />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="信用代码" prop="registeredno">
              <el-input v-model="ruleForm.registeredno"  type="text" class="w270" placeholder="请输入信用代码" />
            </el-form-item>
            <el-form-item label="法人代表" prop="registeredman">
              <el-input v-model="ruleForm.registeredman"  type="text" class="w270" placeholder="请输入法人代表" />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="注册地址" prop="regplace">
              <el-input v-model="ruleForm.regplace"  class="w270" placeholder="请输入注册地址" />
            </el-form-item>
            <el-form-item label="成立日期" prop="registrationdate">
              <el-date-picker
                v-model="ruleForm.registrationdate"
                class="w270"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="请输入成立日期"
              />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="注册资本" prop="regmoney">
              <el-input v-model="ruleForm.regmoney"  class="w270" placeholder="请输入注册资本" />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="有效期" prop="annualsurveytime">
              <el-date-picker
                v-model="ruleForm.annualsurveytime"
                class="w170"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                @change="getAnnualsurveytime"
              />
              <span style="margin-left: 20px">至</span>
            </el-form-item>
            <el-form-item prop="validdate" class="item-validdate">
              <el-date-picker
                v-model="ruleForm.validdate"
                class="w170"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择截止日期"
                @change="getValiddate"
              />
              <el-radio v-model="longTerm" class="ml16 radio-title" label="1" @change="addLongTerm">长期有效</el-radio>
            </el-form-item>
          </div>
          <el-form-item label="经营范围" prop="managerange">
            <el-input v-model="ruleForm.managerange"  type="textarea" style="width: 636px" :rows="5" placeholder="请输入经营范围" />
          </el-form-item>
          <!-- <el-form-item label="年产值" >
            <el-select
                v-model="ruleForm.ncz"
                placeholder="请选择年产值"
                class="w170"
                clearable
                @change="changestatus"
              >
                <el-option
                  v-for="item in classification"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
          </el-form-item> -->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer upload">
        <el-button @click="goBackWorkbench">取 消</el-button>
        <el-button type="primary" :loading="isWorkbench" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
      <span v-if="state == -1 || state == 0" slot="footer" class="dialog-footer" />
    </el-dialog>
    <el-dialog title="资质认证" :visible.sync="waitOpen" width="760px" :close-on-click-modal="false" :before-close="goBackWorkbench">
      <!-- 上传成功资质，等待中 -->
        <div class="dia_success">提交成功！</div>
        <div class="dia_sh">您的申请已提交成功，工作人员会尽快与您联系。</div>
        <div class="kf_body">
          <div class="flex">
            <img class="kf_logo" src="https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/tx.jpg" alt="">
          <div>
            <div class="kf_name">刘亚伟 <span>销售顾问</span></div>
            <div class="kf_news"><i class="el-icon-phone-outline pr8" ></i>
              15718850776
            </div>
            <div class="kf_news"><i class="el-icon-message pr8"></i> liuyw@instrument.com.cn</div>
          </div>
          </div>
       <div class="flex">
        <div class="mr30">
            <img class="kf_ewm" src="https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/1679907270939.jpg" alt="">
            <div class="kf_text">在线客服</div>
          </div>
          <img class="kf_img" src="@/assets/img/beiing_3.png" alt="">
       </div>
     
        </div>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
import Cookie from 'js-cookie'
export default {
  data() {
    return {
      classification:['500万以下','2000-5000万','5000万-1亿','1亿-5亿','5亿以上'],
      open: true,
      waitOpen:false,
      state: 2,
      isWorkbench: false,
      longTerm: '',
      loading: false,
      picName: '',
      isHaveInfo: false,
      ruleForm: {
        title: '', // 证书名称
        registeredno: '', // 信用代码
        registeredman: '', // 法人代表
        regplace: '', // 注册地址
        registrationdate: '', // 成立日期
        regmoney: '', // 注册资本
        managerange: '', // 经营范围
        annualsurveytime: '', // 证书开始有效期
        validdate: '', // 证书截止有效期
        filename: '',
        companyId:Cookie.get('IMID'),
        imlistid:Cookie.get('imListId'),
        // ncz:'', 暂时去掉，还没定好
      },
      rules: {
        title: [{ required: true, message: '请填写证书名称', trigger: 'blur' }],
        newregisteredtype: [{ required: true, message: '请填写企业类型', trigger: 'blur' }],
        registeredno: [{ required: true, message: '请填写信用代码', trigger: 'blur' }],
        registeredman: [{ required: true, message: '请填写法人代表', trigger: 'blur' }],
        regplace: [{ required: true, message: '请填写注册地址', trigger: 'blur' }],
        registrationdate: [{ required: true, message: '请填写成立日期', trigger: 'change' }],
        regmoney: [{ required: true, message: '请填写注册资本', trigger: 'blur' }],
        annualsurveytime: [{ required: true, message: '请填写证书有效期开始时间', trigger: 'change' }],
        validdate: [{ required: true, message: '请填写证书有效期截止时间', trigger: 'change' }],
        managerange: [{ required: true, message: '请填写经营范围', trigger: 'blur' }]
      },
      infoData: {}
    }
  },
  created() {
  },
  methods: {
    goBackWorkbench() {
      this.$router.push('/login?type=sign')
    },
    async getOCRInfo(imgUrl) {
      const params = { imgUrl }
      this.loading = true
      this.isHaveInfo = false
      try {
        const { data, code } = await api.common.getOcr(params)
        this.isHaveInfo = true
        this.loading = false
        if (code === 200) {
          this.$set(this.ruleForm, 'title', data.title)
          this.$set(this.ruleForm, 'newregisteredtype', data.newregisteredtype)
          this.$set(this.ruleForm, 'registeredno', data.registeredno)
          this.$set(this.ruleForm, 'registeredman', data.registeredman)
          this.$set(this.ruleForm, 'regplace', data.regplace)
          this.$set(this.ruleForm, 'registrationdate', data.registrationdate)
          this.$set(this.ruleForm, 'regmoney', data.regmoney)
          this.$set(this.ruleForm, 'managerange', data.managerange)
          this.$set(this.ruleForm, 'annualsurveytime', data.annualsurveytime)
          this.$set(this.ruleForm, 'validdate', data.validdate)

          // 判断证书有效期是否是100年--》长期有效
          const startYaer = this.ruleForm.annualsurveytime.split('-')[0]
          const startMonth = this.ruleForm.annualsurveytime.split('-')[1]
          const startDay = this.ruleForm.annualsurveytime.split('-')[2]
          const newTime = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
          if (newTime == this.ruleForm.validdate) {
            this.longTerm = '1'
          }
        }
      } catch (error) {
        // Object.assign(this.$data.ruleForm, this.$options.data().ruleForm)
        // this.ruleForm = this.$options.data().ruleForm
        // this.ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        // 以上方法初始化都不好使，待研究
        this.ruleForm.title = '' // 证书名称
        this.ruleForm.registeredno = '' // 信用代码
        this.ruleForm.registeredman = '' // 法人代表
        this.ruleForm.regplace = '' // 注册地址
        this.ruleForm.registrationdate = '' // 成立日期
        this.ruleForm.regmoney = '' // 注册资本
        this.ruleForm.managerange = '' // 经营范围
        this.ruleForm.annualsurveytime = '' // 证书开始有效期
        this.ruleForm.validdate = '' // 证书截止有效期
        this.isHaveInfo = true
        this.loading = false
      }
    },
    handlePicSuccess(res) {
      this.picName = res.data
      this.ruleForm.filename = res.data
      this.getOCRInfo(`https://img1.17img.cn/17img/${this.picName}`)
    },
    beforePicUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 20MB!')
      }
      return isJPG && isLt5M
    },
    delectImg() {
      this.picName = ''
      this.ruleForm.filename = ''
    },
    addLongTerm() {
      if (this.ruleForm.annualsurveytime) {
        const startYaer = this.ruleForm.annualsurveytime.split('-')[0]
        const startMonth = this.ruleForm.annualsurveytime.split('-')[1]
        const startDay = this.ruleForm.annualsurveytime.split('-')[2]
        this.ruleForm.validdate = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
        this.longTerm = '1'
      } else {
        this.$message.error('请选择有效期的开始时间')
        this.longTerm = ''
      }
    },
    submitForm(formName) {
      if (this.isHaveInfo && this.picName) {
        this.$refs[formName].validate(async(valid) => {
          this.isWorkbench = true
          if (valid) {
            await api.login.addQualification(this.ruleForm)
            // this.goBackWorkbench()
            // this.$message({
            //   type: 'success',
            //   message: '提交成功，即将进入工作台!'
            // })
            this.waitOpen=true
            this.open=false
          } else {
            return false
          }
        })
      } else {
        this.$message({
          type: 'error',
          message: '请上传执照!'
        })
      }
    },
    getValiddate(data) {
      if (this.ruleForm.annualsurveytime && data) {
        const startYaer = this.ruleForm.annualsurveytime.split('-')[0]
        const startMonth = this.ruleForm.annualsurveytime.split('-')[1]
        const startDay = this.ruleForm.annualsurveytime.split('-')[2]
        const newTime = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
        if (data == newTime) {
          this.longTerm = '1'
        } else {
          this.longTerm = ''
        }
      } else {
        this.longTerm = ''
      }
    },
    getAnnualsurveytime(data) {
      if (this.ruleForm.validdate && data) {
        const startYaer = data.split('-')[0]
        const startMonth = data.split('-')[1]
        const startDay = data.split('-')[2]
        const newTime = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
        if (this.ruleForm.validdate == newTime) {
          this.longTerm = '1'
        } else {
          this.longTerm = ''
        }
      } else {
        this.longTerm = ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .upload-container {
    width: 100%;
    height: 100vh;
    background: url(https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/dialog_bg.jpg) no-repeat;
    position: absolute;
    top:0;
    ::v-deep .el-dialog {
      .el-dialog__header {
        padding-bottom: 20px;
        border-bottom: 1px solid #E5EAF0;
        .el-dialog__title {
          font-size: 16px;
          font-weight: 500;
          color: #202933;
        }
      }
      .el-dialog__body {
        padding: 0px;
        .certification-group {
          padding: 25px;
          .group-h1 {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            line-height: 1;
          }
          .group-tip {
            font-size: 14px;
            color: #7E8790;
            line-height: 1.8;
          }
          .group-tip2{
font-size: 16px;
color: #4F5862;
line-height: 26px;
margin-bottom: 10px;
          }
          .group-upload {
            width: 100%;
            height: 100px;
            background: #F5F8FC;
            padding: 15px 25px;
            box-sizing: border-box;
            margin: 20px auto 0;
            .upload-img {
              width: 100px;
              height: 75px;
              display: inline-block;
              vertical-align: top;
              margin-right: 33px;
              position: relative;
              img {
                width: 100%;
                max-height: 100%;
              }
              .el-icon-error {
                position: absolute;
                top: -10px;
                right: -10px;
                font-size: 20px;
                z-index: 9;
                cursor: pointer;
              }
            }
            .upload-box {
              display: inline-block;
              .el-upload {
                text-align: left;
                .el-button {
                  padding: 8px 20px;
                }
              }
              .box-tip {
                font-size: 12px;
                color: #7E8790;
                margin: 15px auto;
                text-align: left;
              }
              .el-upload-list {
                display: none;
              }
            }
          }
        }
        .upload-info {
          margin: 30px 25px 20px;
          .el-form-item {
            margin-right: 20px;
            &.item-validdate {
              .el-form-item__content {
                margin-left: 0!important;
                .el-radio{
                  &.is-checked {
                    .el-radio__label {
                      color: #0c7ff2;
                    }
                  }
                  .el-radio__label {
                    color: #7E8790;
                  }
                }
              }
            }
            .el-form-item__label {
              text-align: left;
              font-size: 14px;
              padding-block: 0;
              color: #7E8790;

              &::before {
                content: none;
              }
            }
          }
          .el-radio-group {
            .el-radio {
              height: auto;
              padding: 10px 35px;
              border-radius: 0;
              margin-right: 25px;
              margin-left: 0;
              .el-radio__input{
                display: none;
              }
              .el-radio__label {
                padding-left: 0;
              }
            }
          }
        }
      }
      .el-dialog__footer {
        padding: 0;
        text-align: center;
        .dialog-footer {
          position: relative;
          &.upload {
            // width: 100%;
            height: 100%;
            border-top: 1px solid #E5EAF0;
            padding: 25px;
            display: block;
            @include flex(row, center, center);
            .el-button {
              padding: 8px 20px;
            }
          }
        }
      }
    }
  }
  .dia_success{
font-size: 20px;
color: #202933;
line-height: 26px;
padding-top: 40px;
padding-bottom: 14px;
text-align: center
  }
  .dia_sh{
font-size: 14px;
color: #7E8790;
line-height: 24px;
padding-bottom: 30px;
text-align: center

}
  .kf_body{
    @include flex(row, flex-start, space-between);
    padding: 34px 48px 24px;
    background: linear-gradient(180deg, #EDF4FF 0%, rgba(255,255,255,0) 100%);
border-top: 1px solid #CEE5FC;
.kf_logo{
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 50%;
  margin-right: 24px;
}
.kf_name{
font-size: 16px;
font-weight: 600;
color: #202933;
line-height: 19px;
margin-bottom: 20px;
span{
  display: inline-block;
  padding-left: 8px;
font-size: 12px;
color: #7E8790;
line-height: 14px;
}
}
.kf_news{
font-size: 14px;
color: #4F5862;
line-height: 16px;
margin-bottom: 10px;
.pr8{
  padding-right: 8px;
}
}
.kf_ewm{
width: 89px;
height: 89px;
}
.kf_text{
  margin-top: 5px;
  text-align: center;
font-size: 12px;
color: #7E8790;
line-height: 14px;

}
.kf_img{
  width: 124px;

}
  }
</style>
